<template>
  <el-container>
    <!-- 侧边栏区域 -->
    <el-aside class="asideMenu">
        <el-scrollbar>
          <el-menu 
            :default-active="$route.path"
            active-text-color="#409EFF"
            class="navMenu"
            unique-opened
            router
          >
            <div class="logo">
              <img src="../../assets/images/logo.png" height="22">
            </div>
            <!-- 主页 -->
            <el-menu-item index="/homePage">
              <template slot="title">
                <i class="el-icon-aim"></i>
                <span> 主页 | 控制台 </span>
              </template>
            </el-menu-item>
            <!-- 地图 -->
            <el-menu-item index="/bigData">
              <template slot="title">
                <i class="el-icon-s-data"></i>
                <span> 大数据展示 </span>
              </template>
            </el-menu-item>
            <!-- 脚标机监控 -->
            <el-submenu index="3">
              <template slot="title">
                <i class="el-icon-monitor"></i>
                <span v-bind:class="{'highlightFirstMenu':this.$route.path === '/barcodeMachineStatus'||this.$route.path === '/barcodeMachineAlert'}"> 脚标机监控 </span>
              </template>
              <el-menu-item index="/barcodeMachineStatus">脚标机监控</el-menu-item>
              <el-menu-item index="/barcodeMachineAlert">报警信息记录</el-menu-item>
            </el-submenu>
            <!--贴码管理-->
            <el-submenu index="4">
              <template slot="title">
                <i class="el-icon-s-grid"></i>
                <span v-bind:class="{'highlightFirstMenu':this.$route.path === '/labelingRecordList'||this.$route.path === '/barcodeMachineSearch'}"> 贴标信息管理 </span>
              </template>
              <el-menu-item index="/labelingRecordList">贴标信息管理</el-menu-item>
              <el-menu-item index="/barcodeMachineSearch">贴标历史查询</el-menu-item>
            </el-submenu>
            <!-- 基础数据管理 -->
            <el-submenu index="5">
              <template slot="title">
                <i class="el-icon-document"></i>
                <span v-bind:class="{'highlightFirstMenu':this.$route.path === '/slaughterHouseManage'||this.$route.path === '/toMarketManage'||this.$route.path === '/stallsManage'||this.$route.path === '/allBarcodeMachineManage'||this.$route.path === '/barcodeMachineManage'||this.$route.path === '/idCardManage'||this.$route.path === '/poultryCategoryManage'||this.$route.path === '/poultryParentManage'||this.$route.path === '/entrustManage'}"> 基础数据管理 </span>
              </template>
              <el-menu-item index="/slaughterHouseManage">屠宰市场管理</el-menu-item>
              <el-menu-item index="/toMarketManage">去向市场管理</el-menu-item>
              <el-menu-item index="/stallsManage">屠宰档口管理</el-menu-item>
              <el-menu-item index="/allBarcodeMachineManage">脚标机管理</el-menu-item>
              <el-menu-item index="/barcodeMachineManage">脚标机关联信息管理</el-menu-item>
              <el-menu-item index="/idCardManage">ID卡数据管理</el-menu-item>
              <el-menu-item index="/poultryCategoryManage">禽类信息管理</el-menu-item>
              <el-menu-item index="/poultryParentManage">父级类别管理</el-menu-item>
              <el-menu-item index="/entrustManage">委托管理</el-menu-item>
            </el-submenu>
            <!--条形码发放回收记录-->
            <el-submenu index="6">
              <template slot="title">
                <i class="el-icon-c-scale-to-original"></i>
                <span v-bind:class="{'highlightFirstMenu':this.$route.path === '/barcodeGrantList'||this.$route.path === '/barcodeRecoveryList'}"> 条形码发放回收管理 </span>
              </template>
              <el-menu-item index="/barcodeGrantList">条形码发放记录管理</el-menu-item>
              <el-menu-item index="/barcodeRecoveryList">条形码回收记录管理</el-menu-item>
            </el-submenu>
            <!--脚标机发放回收-->
            <el-submenu index="7">
              <template slot="title">
                <i class="el-icon-guide"></i>
                <span v-bind:class="{'highlightFirstMenu':this.$route.path === '/barcodeMachineGrant'||this.$route.path === '/barcodeMachineRecovery'}"> 脚标机发放回收管理 </span>
              </template>
              <el-menu-item index="/barcodeMachineGrant">脚标机发放管理</el-menu-item>
              <el-menu-item index="/barcodeMachineRecovery">脚标机回收管理</el-menu-item>
            </el-submenu>
            <!--脚标机报废记录-->
            <el-submenu index="8">
              <template slot="title">
                <i class="el-icon-s-tools"></i>
                <span v-bind:class="{'highlightFirstMenu':this.$route.path === '/barcodeMachineRepair'||this.$route.path === '/barcodeMachineScrap'}"> 脚标机报废维修管理 </span>
              </template>
              <el-menu-item index="/barcodeMachineRepair">脚标机报修记录管理</el-menu-item>
              <el-menu-item index="/barcodeMachineScrap">脚标机报废记录管理</el-menu-item>
            </el-submenu>
            <!--管理员审核-->
            <el-submenu index="9">
              <template slot="title">
                <i class="el-icon-s-custom"></i>
                <span v-bind:class="{'highlightFirstMenu':this.$route.path === '/slaughterHouseStallsAdmin'||this.$route.path === '/toStallsAdmin'||this.$route.path === '/slaughterHouseAdmin'}"> 管理员审核 </span>
              </template>
              <el-menu-item index="/slaughterHouseStallsAdmin">屠宰档口审核</el-menu-item>
              <el-menu-item index="/toStallsAdmin">去向档口审核</el-menu-item>
              <el-menu-item index="/slaughterHouseAdmin">屠宰市场审核</el-menu-item>
            </el-submenu>
            <!--ID卡发放管理-->
            <el-submenu index="10">
              <template slot="title">
                <i class="el-icon-postcard"></i>
                <span v-bind:class="{'highlightFirstMenu':this.$route.path === '/idCardGrant'||this.$route.path === '/idCardRecovery'}"> ID卡发放回收管理 </span>
              </template>
              <el-menu-item index="/idCardGrant">ID卡发放记录管理</el-menu-item>
              <el-menu-item index="/idCardRecovery">ID卡回收记录管理</el-menu-item>
            </el-submenu>
            <!--用户管理-->
            <el-submenu index="11">
              <template slot="title">
                <i class="el-icon-user-solid"></i>
                <span v-bind:class="{'highlightFirstMenu':this.$route.path === '/userInformationManage'||this.$route.path === '/userRolesManage'}"> 用户管理 </span>
              </template>
              <el-menu-item index="/userInformationManage">用户信息管理</el-menu-item>
              <el-menu-item index="/userRolesManage">用户角色管理</el-menu-item>
            </el-submenu>
            <!--角色管理-->
            <el-menu-item index="/roleMenu">
              <template slot="title">
                <i class="el-icon-user"></i>
                <span> 角色权限管理 </span>
              </template>
            </el-menu-item>
            <!--维护人员管理-->
            <el-menu-item index="/maintenancePersonnelList">
              <template slot="title">
                <i class="el-icon-s-check"></i>
                <span> 维护人员管理 </span>
              </template>
            </el-menu-item>
            <!--日志管理-->
            <el-menu-item index="/logRecordList">
              <template slot="title">
                <i class="el-icon-date"></i>
                <span> 日志信息管理 </span>
              </template>
            </el-menu-item>
          </el-menu>
      </el-scrollbar>
    </el-aside>  
    <div class="asideUseless"></div>

      <!-- 页面主体区域 -->
      <el-container>
        
        <!-- <div class="avatar">
          
        <el-button type="info" @click="loginOut">退出</el-button>
        </div> -->
        <!-- 路由占位符 -->
        <router-view></router-view>
      </el-container>
  </el-container>
</template>

<script>

export default {
  data() {
    return {
      visible: false,
      // activeIndex: '',
      // navPath: this.$route.path,
    };
    },
    // methods:{
    // 返回登录页面
    //   loginOut(){
    //     window.sessionStorage.clear()
    //     this.$router.push('/login')
    //   },
    // },
}
    
</script>

<style lang="less" scoped>
//一级菜单高亮
.highlightFirstMenu{
  color: #409EFF !important;
}
// 侧边栏logo
.logo{
  height: 70px;
  width:100% !important;
  top:0 !important;
  background-repeat: no-repeat; 
  line-height: 80px;
  position:sticky !important;
  z-index: 1;
  background-color:rgb(49, 53, 65) !important;
  img{
  padding-left:24px;
}
}

// 侧边栏区域
.asideMenu{
  background-color:rgb(49, 53, 65) !important;
  height:100% !important;
  width:240px !important; 
  position:fixed !important;
  overflow:hidden !important;
  z-index: 1;
}

// 用于占侧边栏位置的盒子
.asideUseless{
  width:240px !important;
}

// 侧边栏菜单样式
/deep/.el-menu,
/deep/.el-submenu,
/deep/.el-menu-item,
/deep/.el-submenu__title{
    background-color:rgb(49, 53, 65) !important;
    color:rgb(121, 138, 150)  !important;
    font-size:15px  !important;
    border-right-width: 0 !important;
  }

/deep/.el-menu-item:hover,.el-menu-item.is-active{ 
    color: #409EFF !important;
  }

/deep/.el-submenu__title:hover,.el-submenu__title.is-active{
    color: #409EFF !important;
  }

/deep/.el-scrollbar {
  height: 100%;
}

// 不显示横向滚动条
/deep/.el-scrollbar__wrap{
  overflow-x:hidden !important;
}


</style>